<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

	.header{
		background-color: orange;
	}
	.container{
		display: flex;
		height: 200px;
	}
	.left{
		background-color: pink;
		flex:5;
	}
	.main{
		background-color: lightgray;
		flex: 5;
	}
	h1,body{
		margin:0;
		padding:0;
		font-size:16px;
	}


</style>
</head>
<body>



<div id="app">

	
	<!-- <router-link to=''>Account</router-link> -->

	<router-view>  </router-view>

<div class="container">
	<router-view  name="left">  </router-view>
	<router-view name='main'>  </router-view>
</div>
	
  
</div>
  



<br>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script type="text/javascript">

var header = {
	template:'<h1 class="header">header 头部区域</h1>'
}

var leftBox = {
	template:'<h1 class="left">leftBox 左边区域 </h1>'
}

var mainBox = {
	template:'<h1  class="main">maiBox 主体区域</h1>'
}

var router = new VueRouter({

	routes:[
		{path:'/',components:{
			//在主页上，router0view 默认展示的组件为header，
			//如果name为left的话就展示对应的组件
			//适用于同一级别的多个router-view
					'default':header,
					'left':leftBox,
					'main':mainBox
				}
		},

		{path:'/leftBox',component:leftBox},
		{path:'/mainBox',component:mainBox}
	]

})





var  vm= new Vue({
  el: '#app',

  data: {
  	 
  },

  methods:{

  },

  router//挂载路由



})





</script>

	
</body>
</html>